<template>
  <el-dialog :visible.sync="visible" title="题目">
    <div>
      <span>题目: {{ questionText }}</span>
      <div v-for="(option, index) in options" :key="index" class="option">
        <el-radio 
        v-model="selectedOption" 
        :label="index + 1"
        :disabled="showResult"
        >
          {{ option }}
          
        </el-radio>
      </div>

      <!-- 提交后显示的结果区域 -->
      <div v-if="showResult" class="result-section">
        <span>正确答案：{{ correctAnswerText }}</span>
        <div :class="['user-answer', { correct: isCorrectAnswer, incorrect: !isCorrectAnswer }]">
          您的选择：{{ selectedOptionText }}
        </div>
        <span v-if="isCorrectAnswer" class="message correct">你做对了，再接再励！</span>
        <span v-else class="message incorrect">你做错了，下一题努力哦（可以到查看错题中反复查看自己的错题）。</span>
      </div>
    </div>
    <span slot="footer" v-if="!showResult" class="dialog-footer">
      <el-button type="primary" @click="submitAnswer">提交</el-button>
    </span>
    <span slot="footer" v-else class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
      <el-button type="primary" @click="goToNextQuestion">下一题</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { submitAnswer } from "@/api/brush/online";
export default {
  props: {
    visible: Boolean,
    question: Object, // 包含 questionId, questionText, options, correctOption (1-4), correctAnswer ('A'-'D') 等属性
    userId: Number // 用户ID
  },
  data() {
    return {
      selectedOption: null, // 用户选择的选项
      showResult: false, // 是否显示结果
      userAnswer: null
    };
  },
  computed: {
    options() {
      return [
        this.question.optionTextA,
        this.question.optionTextB,
        this.question.optionTextC,
        this.question.optionTextD
      ];
    },
    questionType() {
      return this.question.questionType;
    },
    questionText() {
      return this.question.questionText;
    },
    correctAnswer() {
      return this.question.correctAnswer;
    },
    correctAnswerText() {
      return this.question.correctAnswer; 
    },
    selectedOptionText() {
      const optionIndex = this.selectedOption - 1;
      return this.options[optionIndex] || '未选择';
    },
    isCorrectAnswer() {

      var asw = this.correctAnswerText;
      console.log('asw/correctAnswerText/this.question.correctAnswer:', asw);
      var caws = 0
      if(asw ==='A'){
        caws =1;
      }else if (asw ==='B'){
        caws =2;
      }else if (asw ==='C'){
        caws =3;
      }else if (asw ==='D'){
        caws =4;
      }else {asw ='0';}
      // 比较用户选择的选项和正确答案字符
      
      console.log('selectedOption:', this.selectedOption);
      console.log('selectedOptionText:', this.selectedOptionText);
      console.log('caws:', caws);
      if(this.selectedOption === 1){
        this.userAnswer ='A';
      }else if (this.selectedOption === 2){
        this.userAnswer ='B';
      }else if (this.selectedOption === 3){
        this.userAnswer ='C';
      }else if (this.selectedOption === 4){
        this.userAnswer ='D';
      }else {      this.userAnswer =null;}
      return this.selectedOption  === caws;
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false);
      this.resetState();
    },
    goToNextQuestion() {
      this.$emit('next-question'); // 发出事件以请求下一题
      this.closeDialog();
    },
    submitAnswer() {
      if (this.selectedOption !== null) {
        this.showResult = true;
        const isCorrect = this.isCorrectAnswer; 
        const questionType = this.question.questionType;
        const isCorrectNum = isCorrect ? 1 : 0;
        // 提交答案给后端（这里需要实现提交逻辑）
        console.log('提交答案:', {
          questionId: this.question.questionId,
          userAnswer: this.userAnswer,
          userId: this.userId,
          isCorrect: isCorrectNum,
          questionType: questionType
        });
        const answerData = {
          questionId: this.question.questionId,
          userAnswer: this.userAnswer,
          userId: this.userId,
          isCorrect: isCorrectNum,
          questionType: questionType
        };
        // 调用 submitAnswer API 方法
        submitAnswer(answerData).then(response => {
          console.log('答案提交成功，响应:', response);
        }).catch(error => {
          console.error('答案提交失败:', error);
        });
      } else {
        this.$message.error('请先选择一个选项！');
      }
    },
    resetState() {
      this.showResult = false;
      this.selectedOption = null;
    }
  }
};
</script>

<style scoped>
.option {
  margin-bottom: 10px;
}
.result-section {
  margin-top: 20px;
}
.user-answer {
  font-weight: bold;
}
.user-answer.correct {
  color: green;
}
.user-answer.incorrect {
  color: red;
}
.message.correct {
  color: green;
}
.message.incorrect {
  color: red;
}
.buttons-wrapper {
  margin-top: 10px;
}
</style>